<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>团购首页</title>
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
   <!-- 头部 -->
    <header>
         <!-- 头部内容 -->
    <div class="h_top">
        <img src="./images/index/LOGO.png" alt="">
        <!-- 搜索框 -->
        <div class="inp">
            <input type="text" placeholder="请输入商品名称">

        </div>

        <!-- 地区 -->
        <div class="sel">
        <select>
            <option value="广州市">广州市</option>
            <option value="深圳市">深圳市</option>
            <option value="北京市">北京市</option>
        </select>
         <!-- 三角形 -->
        <i></i>
    </div>
    </div>

    <!-- 轮播图 -->
    <div class="h_bt">
        <ul>
            <li><img src="./images/index/图层1.png" alt=""></li>
            <li><img src="./images/index/图层1.png" alt=""></li>
            <li><img src="./images/index/图层1.png" alt=""></li>
        </ul>

        <!-- 轮播图进度条 -->
        <div class="bar">
            <div></div>
        </div>
    </div>
    </header>

    <!-- 内容 -->
    <main>
        <!-- 顶部内容 -->
        
        <div class="m_top">
            <!-- 顶部标题 -->
               <div class="top1">
                  <p> <img src="./images/index/团购.png" alt=""> <span>优惠团购</span>  </p>
                  <p>更多<img src="./images/index/更多.png" alt=""></p>
               </div>
               <!-- 图片 -->
               <div class="top2">
                   <p>   <img src="./images/index/1.png" alt="">
                    <img src="./images/index/3.png" alt="">
                
                </p>
                <p>
                   <img src="./images/index/2.png" alt="">
                   <img src="./images/index/4.png" alt="">
                </p>
               </div>
               <!-- 底部标题 -->
               <div class="top3">
                <p> <img src="./images/index/形状5.png" alt=""> <span>猜你喜欢</span>  </p>
                <p>更多<img src="./images/index/更多.png" alt=""></p>
               </div>
        </div>

        <!-- 底部内容 -->
        <div class="m_bt">
                   <div class="bt1">
                       <img src="./images/index/图层 3.png" alt="">
                       <!-- 文本 -->
                       <div class="txt">
                           <div class="title">
                            <h4>万岁寿司（正佳店）</h4>
                            <span> &lt;100m </span>
                           </div>

                        <div class="info">
                            <p>[100店通用]</p><span>双人套餐</span>
                        </div>
                                 
                        <div class="type">
                            <h4>￥88.00</h4>
                            <span> 已售1000 </span>
                           </div>

                       </div>
                   </div>
                   <div class="bt1">
                       <img src="./images/index/图层 4.png" alt="">
                       <div class="txt">
                        <div class="title">
                            <h4>周黑鸭（正佳店）</h4>
                            <span> &lt;100m </span>
                           </div>

                        <div class="info">
                            <p>[100店通用]</p><span>双人套餐</span>
                        </div>
                                 
                        <div class="type">
                            <h4>￥88.00</h4>
                            <span> 已售1000 </span>
                           </div>
                       </div>
                   </div>

                        <!-- <div class="bt1">
                       <img src="./images/index/图层 4.png" alt="">
                       <div class="txt">
                        <div class="title">
                            <h4>周黑鸭（正佳店）</h4>
                            <span> &lt;100m </span>
                           </div>

                        <div class="info">
                            <p>[100店通用]</p><span>双人套餐</span>
                        </div>
                                 
                        <div class="type">
                            <h4>￥88.00</h4>
                            <span> 已售1000 </span>
                           </div>
                       </div>
                   </div> -->
        </div>
        

    </main>
    
    <!-- 底部导航栏 -->
    <nav>
        <div class="bt">
          <p>
             <a href="./index.html">
                <img src="./images/index/首页.png" alt="">
                <span>首页</span>
             </a> 

          </p>
          <p>
              <a href="./sort.html">
              <img src="./images/index/分类.png" alt="">
                <span>分类</span>
                  
              </a>
          </p>
          <p>
            <a href="./find.html">
              <img src="./images/index/发现.png" alt="">
              <span>发现</span>
               
            </a>

          </p>
          <p>
            <a href="./admin.html">
              <img src="./images/index/我的.png" alt="">
              <span>我的</span>
              
            </a>

          </p>
        </div>
    </nav>
</body>
</html>